<template>
  <van-nav-bar
    title="个人信息"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
    right-text="保存"
  />
  <!-- 进度条 -->
  <div class="changinfo-progress" v-show="topShow">
    <van-progress
      color="#f3c379"
      :percentage="infoLength * 20 + 20"
      ref="progress"
    />
  </div>
  <div class="progress-sizi" v-show="topShow">
    <p>
      资料完整度：<span>{{ infoLength * 20 + 20 + "%" }}</span>
    </p>
  </div>
  <!-- 内容部分-头像 -->
  <div class="progress-content">
    <p class="content1">我的头像</p>
    <div class="content2">
      <img src="http://81.68.133.139:3000/images/mine/photo.png" alt="" />
      <p class="content3"><van-icon name="arrow" color="#ababab" /></p>
    </div>
  </div>
  <!-- 内容部分-昵称 -->
  <div class="progress-nic">
    <van-cell-group inset>
      <van-field
        v-model="baoCun.name"
        label="昵称"
        placeholder="请输入您的昵称"
        @change="handleClick"
      />
    </van-cell-group>
  </div>
  <!-- 内容部分-性别 -->
  <div class="progress-sex">
    <van-cell is-link title="性别 " @click="show = true" />
    <div class="sex-name">{{ sex }}</div>
    <!-- v-model="sex" -->
    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
      @click="changeClick"
    ></van-action-sheet>
  </div>
  <!-- 内容部分-城市 -->
  <div class="progress-city">
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="state.show = true"
    />
    <van-popup v-model:show="state.show" round position="bottom">
      <van-cascader
        v-model="state.cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="state.show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
  <!-- 内容部分-个人简介 -->
  <div class="progress-people">
    <van-cell-group inset>
      <van-field
        v-model="baoCun.resume"
        label="个人简介"
        placeholder=""
        @change="getPop"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { postUpdateInfoList } from "../utils/api";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { ref, reactive } from "vue";
import { mapActions, mapState } from "vuex";
export default {
  setup() {
    const arr = reactive({
      name: "",
      sex: "",
      city: "",
      resume: "",
    });

    const handleClick = () => {
      //获取名字
      arr.name = baoCun.name;
    };
    const changeClick = () => {
      //获取性别
      let change1 = actions;
      change1.forEach((val) => {
        arr.sex = val.name;
      });
    };

    const getPop = () => {
      // 获取个人简介
      arr.resume = baoCun.resume;
    };
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    //百分比
    const number = ref("");
    //昵称
    const value = ref("");
    // 性别
    const sex = ref("");
    // 个人简介
    const prople = ref("");
    const show = ref(false);
    const actions = [{ name: "男" }, { name: "女" }];
    // 城市
    const state = reactive({
      show: false,
      fieldValue: "",
      cascaderValue: "",
    });
    const baoCun = reactive({
      name: "",
      resume: "",
    });
    const options = [
      {
        text: "浙江省",
        value: "330000",
        children: [{ text: "杭州市", value: "330100" }],
      },
      {
        text: "江苏省",
        value: "320000",
        children: [{ text: "南京市", value: "320100" }],
      },
    ];

    // 保存按钮
    const onClickRight = async () => {
      await postUpdateInfoList({
        uid: localStorage.getItem("userid"),
        uobj: {
          name: arr.name,
          sex: arr.sex,
          add: arr.city,
          profile: arr.resume,
        },
      });
    };
    return {
      // 性别
      show,
      actions,
      value,
      sex,
      // 城市
      state,
      options,
      // onFinish,
      onClickRight,
      onClickLeft,
      // 百分比
      number,
      baoCun,
      prople,
      arr,
      // arr1,
      handleClick,
      changeClick,
      getPop,
      // onSelect,
    };
  },
  computed: {
    ...mapState("mine", ["userInfo", "minepets"]),
    infoLength() {
      let length = 0;

      for (let item in this.arr) {
        // console.log(item);
        if (this.arr[item] !== "" && this.arr[item] !== false) {
          length++;
        }
      }
      return length;
    },
    topShow() {
      if (this.infoLength === 4) {
        return false;
      } else {
        return true;
      }
    },
  },
  async created() {
    await this.getUserInfo({ uid: localStorage.getItem("userid") });
    // console.log(this.userInfo);
    //更新setuparr
    this.arr.name = this.userInfo.name;
    this.arr.sex = this.userInfo.sex;
    this.arr.city = this.userInfo.add;
    this.arr.resume = this.userInfo.profile;
    //更新双向绑定数据
    this.baoCun.name = this.userInfo.name;
    this.sex = this.userInfo.sex;
    this.fieldValue = this.userInfo.add;
    this.baoCun.resume = this.userInfo.profile;
  },

  methods: {
    ...mapActions("mine", ["getUserInfo", "getUerMinepets"]),
    onCancel() {
      Toast("取消");
    },
    onSelect(item) {
      this.sex = item.name;
      this.show = false;
      Toast(item.name);
    },
    onFinish({ selectedOptions }) {
      // 遍历数组拼接出地址;
      let add = "";
      selectedOptions.forEach((val) => {
        add += val.text;
      });
      this.arr.city = add;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
  },
};
</script>

<style lang="less">
.van-nav-bar__text {
  color: #ababab;
  font-size: 18px;
  margin-right: 10px;
}
.van-nav-bar__title {
  font-weight: 600;
}

.van-badge__wrapper {
  font-weight: 600;
  color: #ababab !important;
}
.changinfo-progress {
  width: 100%;
  .van-progress__pivot {
    display: none;
  }
}
.progress-sizi {
  height: 40px;
  font-size: 17px;
  background: #f3f3f3;
  p {
    color: #ababab;
    padding-left: 20px;
    margin: 0 !important;
    padding-top: 10px;
  }
}
.progress-content {
  widows: 100%;
  height: 70px;
  background: white;
  margin-top: 6px;
  border-bottom: 1px #e2e0e0 solid;
  display: flex;
  justify-content: space-between;
  .van-icon {
    margin-right: 15px;
    margin-top: 30px;
  }
  .content1 {
    width: 100px;
    font-size: 15px;
    color: #ababab;
    padding-left: 20px;
    margin-top: 30px;
  }
  .content2 {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    img {
      width: 50px;
      height: 50px;
      margin-left: 170px;
      margin-top: 10px;
    }
    .van-badge__wrapper {
      font-size: 16px;
    }
  }
}
.progress-nic {
  width: 100%;
  margin-top: 2px;
  border-bottom: 1px #e2e0e0 solid;
  .van-cell-group {
    margin: 0 !important;
  }
  .van-field__control {
    font-size: 16px;
  }
  .van-cell {
    height: 50px;
    .van-cell__title {
      color: #ababab;
      font-size: 15px;
    }
  }
}
// 性别
.progress-sex {
  width: 100%;
  height: 47px;
  margin-top: 2px;
  border-bottom: 1px #e2e0e0 solid;
  position: relative;
  .van-cell {
    height: 46px;
  }
  .van-icon {
    margin-right: 13px;
  }
  .sex-name {
    position: absolute;
    top: 14px;
    left: 180px;
    font-size: 19px;
    color: #ababab;
  }
  .van-cell__title {
    color: #ababab;
    margin-left: 4px;
    font-size: 16px;
  }
}
.progress-city {
  widows: 100%;
  height: 53px;
  border-bottom: 1px #e2e0e0 solid;
  display: flex;
  justify-content: space-between;
  .van-icon {
    margin-right: 13px;
  }
  .van-field__control {
    font-size: 16px;
  }
  .van-cell__title {
    color: #ababab;
    margin-left: 5px;
    font-size: 16px;
  }
}
.progress-people {
  width: 100%;
  height: 48px;
  border-bottom: 1px #e2e0e0 solid;
  .van-cell-group {
    margin: 0 !important;
  }
  .van-cell__title {
    color: #ababab;
    margin-left: -10px;
    font-size: 16px;
    margin-left: 4px;
  }
}
</style>
